<style>
    .select {
        display: inline-block;
        width: 200px;
    }

    .input-role {
        display: inline-block;
        width: 200px;
    }

    .button-search {
        border: none;

    }

    .gender {
        margin-right: 15px;
    }

    tbody tr td span:hover {
        cursor: pointer;
        color: #2CB5AC;
    }
</style>

<script>
    $(function () {
        var baseUrl = 'http://123.57.57.185:7788';
        var currentPage = 1;
        var pageSize = 10;
        //请求所有角色信息,插入到搜索下拉框中
        $.ajax({
            url: baseUrl + "/role/findAll",
            type: 'get',
            headers: {
                'Authorization': sessionStorage.getItem('token')
            },
            success: function (data) {
                if (data.status == 200) {
                    data.data.forEach(function (item) {
                        $('.select').append(`<option>` + item.name + `</option>`)
                    })
                }
            }
        })
        // 为删除绑定事件
        $('tbody').on('click', '.deleteById', function () {
            var id = $(this).parent().parent().children('td').eq(0).text();
            $.ajax({
                url: baseUrl + '/baseUser/deleteById?id=' + id,
                type: 'GET',
                headers: {
                    'Authorization': sessionStorage.getItem('token')
                },
                success: function () {
                    $('tbody').empty();
                    $('.pagination').empty();
                    findAllByPage(currentPage, pageSize);
                }
            })
        })
        // 为添加绑定事件
        $('.save').click(function () {
            var inputUsername = $('#inputUsername').val();
            var inputRealname = $('#inputRealname').val();
            var inputPassword = $('#inputPassword').val();
            var inputTelephone = $('#inputTelephone').val();
            var inputBirth = new Date().getTime($('#inputBirth').val());

            if ($('.gender')[0].checked) {
                var inputGender = $('.gender')[0].getAttribute('value');
            } else {
                var inputGender = $('.gender')[1].getAttribute('value');
            }
            $.ajax({
                url: baseUrl + '/baseUser/saveOrUpdate',
                type: "POST",
                headers: {
                    'Authorization': sessionStorage.getItem('token')
                },
                data: {
                    username: inputUsername,
                    realname: inputRealname,
                    password: inputPassword,
                    gender: inputGender,
                    telephone: inputTelephone,
                    birth: inputBirth
                },
                success: function () {
                    $('tbody').empty();
                    $('.pagination').empty();
                    findAllByPage(currentPage, pageSize);
                }
            })
            $('.saveExit').trigger('click');
        })
        // 为搜索绑定事件
        $('.user-search').on('click', function () {
            var username = $('.input-role').val();
            var rolename = $('select.select').val();
            $('tbody').empty();
            $('.pagination').empty();
            findAllByPage(currentPage, pageSize, username, rolename);
        })
        // 请求所有用户信息
        function findAllByPage(currentPage, pageSize, username, rolename) {
            if (username && rolename) {
                url = "/baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + '&username=' + username + '&rolename=' + rolename;
            } else if (username) {
                url = '/baseUser/pageQuery?page=' + currentPage + '&pageSize=' + pageSize + '&username=' + username;
            } else if (rolename) {
                url = "/baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + '&rolename=' + rolename;
            } else {
                url = "/baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize;
            }
            //发送请求
            $.ajax({
                url: baseUrl + url,
                type: "get",
                headers: {
                    'Authorization': sessionStorage.getItem('token')
                },
                success: function (data) {
                    console.log(data);
                    var users = data.data.list;
                    //计算分页查询按钮个数
                    var pageNum = Math.ceil(data.data.total / pageSize);
                    //动态插入分页按钮
                    $('.pagination').append(`<li class="former"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`);

                    for (var i = 1; i <= pageNum; i++) {
                        $('.pagination').append(`<li class="pagenum"><a href="#">` + i + `</a></li>`);
                    }
                    $('.pagination').append(`<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`);
                    //分页按钮绑定 页面切换 事件
                    $('.pagenum').on('click', function () {
                        var index = $(this).text();
                        $('tbody').empty();
                        $('.pagination').empty();
                        findAllByPage(index, pageSize);
                    })
                    // 根据用户个数,创建tr插入到tbody
                    users.forEach(function (item, index) {
                        if (item.roles == '') {
                            $("tbody").append(
                                `<tr>
                                    <td style="display: none">`+ item.id + `</td>
                                    <td>`+ (index + 1) + `</td>
					                <td>`+ item.username + `</td>
                                    <td>`+ item.realname + `</td>
                                    <td>学生</td>
				                	<td>`+ item.gender + `</td>
				                	<td>`+ item.status + `</td>
				                	<td>`+ item.telephone + `</td>
					                <td>
						                <span class="set">设置</span>
	 				                	<span class="deleteById">删除</span>
	 					                <span class="identity">详情</span>
	 					                <span class="modify">修改</span>
					                </td>
                                </tr>`
                            )
                        } else {
                            $("tbody").append(
                                `<tr>
                                    <td style="display: none">`+ item.id + `</td>
                                    <td>`+ (index + 1) + `</td>
					                <td>`+ item.username + `</td>
                                    <td>`+ item.realname + `</td>
                                    <td>`+ item.roles[0].name + `</td>
				                	<td>`+ item.gender + `</td>
				                	<td>`+ item.status + `</td>
				                	<td>`+ item.telephone + `</td>
					                <td>
						                <span class="set">设置</span>
	 				                	<span class="deleteById">删除</span>
	 					                <span class="identity">详情</span>
	 					                <span class="modify">修改</span>
					                </td>
                                </tr>`
                            )
                        }

                    })
                }
            })
        }
        findAllByPage(currentPage, pageSize);
    })
</script>
<!-- </head> -->

<!-- <body> -->
<div class="role-btn">
    <form action="#">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">添加</button>
        <input type="text" class="form-control input-role" id="exampleInputName2" placeholder="请输入用户名">
        <select class="form-control select" style="color: #999999;">
            <option disabled selected hidden>请选择角色</option>

        </select>
        <span class="user-search"><a href="#">搜索</a></span>
    </form>
</div>
<!-- 用户 -->
<div class="role-table">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>角色</th>
                <th>性别</th>
                <th>状态</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<!-- 分页 -->
<div class="role-page">
    <nav aria-label="Page navigation">
        <ul class="pagination">

        </ul>
    </nav>
</div>
<!-- 模态框 -->
<div class="modal fade saveExit" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputUsername" class="col-sm-2 control-label">用户名:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputRealname" class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRealname" placeholder="请输入姓名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label gender">性别:</label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="inlineRadio1" value="male" class="gender">男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="inlineRadio2" value="female" class="gender">女
                        </label>
                    </div>

                    <div class="form-group">
                        <label for="inputTelephone" class="col-sm-2 control-label">手机号:</label>
                        <div class="col-sm-10">
                            <input type="tel" class="form-control" id="inputTelephone" placeholder="手机号">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputBirth" class="col-sm-2 control-label">生日:</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputBirth">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default saveExit" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary save">保存</button>
            </div>
        </div>
    </div>
</div>